<script lang="ts">
    import { onMount } from 'svelte';

    onMount(() => {

    });
</script>

<header class="bg-white shadow">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center py-2">
            <div class="flex items-center">
                <div class="text-green-500 text-xl font-bold"><img src="/image/logo.png" class="" style="height: 50px;" /></div>
                <nav class="ml-10 space-x-4 flex">
                    <a href="#" class="menu text-gray-600">
                        产品
                        <svg class="inline-block text-dark dark:text-white" width="11" height="11" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#iwcn0e-a)"><mask id="iwcn0e-b" style="mask-type:alpha;" maskUnits="userSpaceOnUse" x="0" y="0" width="11" height="11"><path d="M11 0H0v11h11V0Z" fill="currentColor"></path></mask><g mask="url(#iwcn0e-b)"><path d="m1 4 4.5 4.5L10 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></g><defs><clipPath id="iwcn0e-a"><path fill="currentColor" d="M0 0h11v11H0z"></path></clipPath></defs></svg>
                        <div class="absolute left-0 bg-white w-full hidden">
                            <ul class="grid grid-cols-3 mx-auto" style="width: 1200px;">
                                <li class="size-full max-w-[400px]"><a href="/audio-recognition" class="block px-4 py-2">语音识别</a></li>
                                <li class="size-full max-w-[400px]"><a href="/audio-synthesis" class="block px-4 py-2">语音合成</a></li>
                                <li class="size-full max-w-[400px]"><a href="/video-generation" class="block px-4 py-2">视频生成</a></li>
                                <li class="size-full max-w-[400px]"><a href="/video-translation" class="block px-4 py-2">视频翻译</a></li>
                                <li class="size-full max-w-[400px]"><a href="/audio-combine" class="block px-4 py-2">背景音合成</a></li>
                                <li class="size-full max-w-[400px]"><a href="/audio-split" class="block px-4 py-2">背景音分离</a></li>
                            </ul>
                        </div>
                    </a>
                    <a href="#" class="menu text-gray-600 hover:text-green-500">
                        测试
                        <svg class="inline-block text-dark dark:text-white" width="11" height="11" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#iwcn0e-a)"><mask id="iwcn0e-b" style="mask-type:alpha;" maskUnits="userSpaceOnUse" x="0" y="0" width="11" height="11"><path d="M11 0H0v11h11V0Z" fill="currentColor"></path></mask><g mask="url(#iwcn0e-b)"><path d="m1 4 4.5 4.5L10 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></g><defs><clipPath id="iwcn0e-a"><path fill="currentColor" d="M0 0h11v11H0z"></path></clipPath></defs></svg>
                        <div class="absolute left-0 bg-white w-full hidden">
                            <ul class="grid grid-cols-3 mx-auto" style="width: 1200px;">
                                <li class="size-full max-w-[400px]"><a href="/test/async" class="block px-4 py-2">Response Async</a></li>
                                <li class="size-full max-w-[400px]"><a href="/test/sse" class="block px-4 py-2">Response Sse</a></li>
                                <li class="size-full max-w-[400px]"><a href="/test/stream" class="block px-4 py-2">Response Stream</a></li>
                                <li class="size-full max-w-[400px]"><a href="/test/grpc" class="block px-4 py-2">Response Grpc</a></li>
                                <li class="size-full max-w-[400px]"><a href="/test/trpc" class="block px-4 py-2">Response Trpc</a></li>
                                <li class="size-full max-w-[400px]"><a href="/test/graphql" class="block px-4 py-2">Response Graphql</a></li>
                                <li class="size-full max-w-[400px]"><a href="/test/graphql2" class="block px-4 py-2">Response Graphql2</a></li>
                            </ul>
                        </div>
                    </a>
                    <a href="#" class="menu text-gray-600 hover:text-green-500">
                        论坛
                        <svg class="inline-block text-dark dark:text-white" width="11" height="11" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#iwcn0e-a)"><mask id="iwcn0e-b" style="mask-type:alpha;" maskUnits="userSpaceOnUse" x="0" y="0" width="11" height="11"><path d="M11 0H0v11h11V0Z" fill="currentColor"></path></mask><g mask="url(#iwcn0e-b)"><path d="m1 4 4.5 4.5L10 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></g><defs><clipPath id="iwcn0e-a"><path fill="currentColor" d="M0 0h11v11H0z"></path></clipPath></defs></svg>
                    </a>
                    <a href="#" class="menu text-gray-600 hover:text-green-500">开发者服务</a>
                    <a href="#" class="menu text-gray-600 hover:text-green-500">成为会员</a>
                </nav>
            </div>
            <div>
                <button class="text-green-500">用户</button>
            </div>
        </div>
    </div>
</header>

<style>
    .menu {
        display: block;
        line-height: 50px;
    }
    .menu:hover div {
        display: block;
    }
</style>
